<template>
  <div ref="cardRef" class="skew-card overflow-hidden rounded-lg relative">
    <div
      class="rounded-lg bg-#161b22 border-1 border-#30363d border-solid relative z-1"
      @mouseout="onMouseout"
      @mousemove="onMousemove">
      <slot>
        
      </slot>
      <div
        :class="shineColor"
        :style="`width: ${shineSize}px; height: ${shineSize}px;`"
        class="skew-card-shine -z-1 w-160 h-160 absolute opacity-0 rounded-full blur-160 mix-blend-soft-light pointer-events-none top-0 left-0"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';

interface Props {
  shineColor?: string;
  shineSize?: number;
}
const props = withDefaults(defineProps<Props>(), {
  shineColor: 'bg-#3fb950',
  shineSize: 640,
})

const yRange = [-1.5, 1.5];
const xRange = [-1, 1];
const cardRef = ref<HTMLDivElement>();


function getRotate(range: number[], value: number, max: number) {
  return ((value / max) * (range[1] - range[0]) + range[0]).toFixed(3);
}

function onMousemove(e: MouseEvent) {
  if (!cardRef.value) return;
  const {width, height, left, top} = cardRef.value.getBoundingClientRect();
  const {offsetX, offsetY, clientX, clientY } = e;
  const ry = getRotate(yRange, offsetX, width);
  const rx = getRotate(xRange, offsetY, height);

  cardRef.value.style.setProperty('--rx', `${rx}deg`);
  cardRef.value.style.setProperty('--ry', `${-ry}deg`);

  cardRef.value.style.setProperty('--tx', `${clientX - left - props.shineSize / 2}px`);
  cardRef.value.style.setProperty('--ty', `${clientY - top - props.shineSize / 2}px`);
}

function onMouseout(e: MouseEvent) {
  if(!cardRef.value) return;
  cardRef.value.style.setProperty('--rx', `0deg`);
  cardRef.value.style.setProperty('--ry', `0deg`);
  // cardRef.value.style.setProperty('--tx', `0px`);
  // cardRef.value.style.setProperty('--ty', `0px`);
}

</script>

<style>
.skew-card {
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: 0.25s;
}
.skew-card:hover .skew-card-shine {
  opacity: 1;
}
.skew-card-shine {
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  transform-origin: 0 0;
}
</style>
